<template>
	<uni-section :title="formatTime(billInfo.billDate)" sub-title="用电报告" type="line">
		<uni-card padding="0" spacing="0">
			<template v-slot:cover>
				<view class="custom-cover">
					<image class="cover-image" mode="aspectFill" :src="cover"></image>
					<view class="cover-content">
						<text class="uni-subtitle uni-white">{{formatTime(billInfo.billDate)}}</text>
					</view>
				</view>
			</template>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" :width="20">最高用电量</uni-th>
					<uni-th align="center" :width="20">最低用电量</uni-th>
					<uni-th align="center" :width="20">平均用电量</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td align="center">{{elecInfo.maxEnergy}}</uni-td>
					<uni-td align="center">{{elecInfo.minEnergy}}</uni-td>
					<uni-td align="center">{{elecInfo.meanEnergy}}</uni-td>
				</uni-tr>
			</uni-table>
			<uni-list>
				<uni-list-item :title="`上期示数:${billInfo.lastUsage} 本期示数:${billInfo.nowUsage}`"></uni-list-item>
				<uni-list-item :title="`支付金额:${billInfo.payAmounts}元`"></uni-list-item>
				<uni-list-item :title="`支付时间:${formatPayTime(billInfo.payDateTime)}`"></uni-list-item>
			</uni-list>
		</uni-card>
	</uni-section>
</template>

<script>
	import {
		getBillInfo,
		getElecInfo
	} from "@/api/system/bill"
	export default {
		data() {
			return {
				// 账单ID
				bid: "",
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

				// 账单详情
				billInfo: {},
				// 报告详情
				elecInfo: {}
			}
		},
		onLoad: function(option) {
			this.bid = option.bid;
		},
		mounted() {
			this.getbillelecInfo();
		},
		methods: {
			// 格式化时间
			formatTime(time) {
				const date = new Date(time); // 将 ISO 8601 字符串转换为 Date 对象
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1; // 获取月份（注意月份是从 0 开始的，所以要加 1）
				return `${year}年${month}月电费账单`;
			},
			// 格式化支付时间
			formatPayTime(time) {
				const date = new Date(time);
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minutes = date.getMinutes();
				const second = date.getSeconds();
				return `${year}-${month}-${day} ${hour}:${minutes}:${second}`
			},
			// 获取账单详情和报告详情
			getbillelecInfo() {
				getBillInfo(this.bid).then(resp1 => {
					this.billInfo = resp1
					getElecInfo(this.bid).then(resp2 => {
						this.elecInfo = resp2
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}
</style>